// 点击 父级节点
// 获取当前点击的 父级节点 位置信息 event.offsetX
// 给对应的实心盒子 改宽度 (用拿到的event.offsetX)
let boxs = document.querySelectorAll('.box');
let real = document.querySelectorAll('.real');
for (let i = 0; i < boxs.length; i++) {
    boxs[i].addEventListener('click', function (event) {
        real[i].style.width = event.offsetX + 'px';
    })
}

let bimg = document.querySelectorAll('.big-img');
let simg = document.querySelectorAll('.small-img');
let previous = document.querySelector('.previous');
let next = document.querySelector('.next');

//全局变量 index : 当前被选中的图片索引
let num = 0;

//循环监听 小图片的点击事件
//给所有的大图片 加上 dispnone （隐藏所有的大盒子）
//将所有的小图片的 small-active 去掉（取消所有的小盒子的选中效果）
//当前对应的 大图片 加上 show (显示对应的大盒子)
// 当前对应的 小图片 加上 small-active (添加选中效果)

for (let i = 0; i < simg.length; i++) {
    simg[i].addEventListener('click', function () {
        for (let j = 0; j < simg.length; j++) {
            bimg[j].classList.add('disnone');
            simg[j].classList.remove('small-active');
        }
        bimg[i].className = 'big-img show';
        simg[i].classList.add('small-active');

        //更改全局变量num 
        num = i;
        
    })
    
}

//下一张
// 获取全局变量 num （拿到当前第几张被选中）
// num++ 
//将所有的大图片的 show 去掉（隐藏所有的大盒子）
//将所有的小图片的 small-active 去掉（取消所有的小盒子的选中效果）
// num对应的 大图片 加上 show (显示对应的大盒子)
// num对应的 小图片 加上 small-active (添加选中效果)

next.addEventListener('click',function(){
    // console.log(num);
    if(num<simg.length-1){
        num++;
    }else{
        num=0;
    }

    for (let j = 0; j < simg.length; j++) {
        bimg[j].classList.add('disnone');
        simg[j].classList.remove('small-active');
    }
    bimg[num].className = 'big-img show';
    simg[num].classList.add('small-active');
})


previous.addEventListener('click',function(){
    if(num<simg.length){
        num--;
    }
    if(num<0){
        num=3;
    }

    for (let j = 0; j < simg.length; j++) {
        bimg[j].classList.add('disnone');
        simg[j].classList.remove('small-active');
    }
    bimg[num].className = 'big-img show';
    simg[num].classList.add('small-active');
})

let inp = document.querySelector('.num');
let add = document.querySelector('.add');
let red = document.querySelector('.reduce');

// console.log(parseInt(inp.value))

add.addEventListener('click',function(){
    inp.value = parseInt(inp.value)+1;
})
red.addEventListener('click',function(){
    
    if(inp.value<=1){
        inp.value = 1;
    }else{
        inp.value = parseInt(inp.value)-1;
    }
})

    //input 输入change事件处理 用户手动输入负数
    inp.addEventListener('change',function(){
        if(parseInt(inp.value) <1){
            inp.value =1 
        }
    })
































